<template>
    <div class="Login">
        <span>登录</span>
        <form @submit.prevent="onSubmit" class="login_form">
            <input type="text" placeholder="请输入" v-model="username" name="uname">
            <br>
            <br>
            <input type="password" placeholder="请输入密码" v-model="password" name="upass">
            <br>
            <input type="checkbox" v-model="checked">
            <label>是否同意<a href="">《用户协议》</a>以及<a href="">《用户隐私政策》</a></label>
            <br>
            <button type="submit">登录</button>
            <div class="login_footer">
                <router-link to="/register">没有账号？立即注册</router-link>
            </div>
        </form>
    </div>
</template>

<style lang="less" scoped>
.Login {
    height: 100vh;
    font-size: 16px;
    width: 100%;
    span {
        position: relative;
        display: block;
        left: 20px;
        top: 20px;
        width: 20vw;
        font-weight: bold;
    }
    .login_form {
        margin-top: 40px;
        position: relative;
        display: block;

        input:nth-child(1),
        input:nth-child(4) {
            background-color: rgb(255, 255, 255);
            margin: 5px 0;
            border: 0;
            width: 80vw;
            height: 30px;
            border-radius: 30px;
            padding-left: 20px;
        }

        input[type="checkbox"] {
            background-color: rgb(255, 255, 255);
            border: gray;
            margin: 10px 0;
            width: 20px;
            height: 15px;
            display: inline-block;
        }

        a {
            text-decoration: underline;
        }

        label {
            font-size: 14px;
        }

        button {
            width: 80vw;
            height: 40px;
            background-color: deepskyblue;
            outline: 0;
            border-radius: 30px;
            border: 0;
            margin: 20px auto;
            display: block;
        }
    }

    .login_footer {
        font-size: 14px;
        text-decoration: underline;
    }
}
</style>

<script>
// 导入组件
import { Dialog } from 'vant';

let sky_users = []
let sky_users_str = localStorage.getItem("SKY_USERS")
if (sky_users_str) {
    // 如果本地有存储用户信息，就把这个存储信息的字符串转成数组
    sky_users = JSON.parse(sky_users_str)
}



export default {
    data() {
        return {
            username: '',
            password: '',
            checked: false,
        };
    },
    methods: {
        onSubmit(values) {
            let { uname, upass } = values
            // 判断用户是否阅读平台协议
            if (!this.checked) {
                // Toast('请阅读协议和政策');
                Dialog.confirm({ message: '请阅读协议和政策' })
                    .then(() => {
                        // on confirm
                        return false;
                    })
                    .catch(() => {
                        // on cancel
                        return false;
                    });
                // alert('请阅读协议和政策');
            }

            // 判断输入框是否为空
            if (uname == '' || upass == '') {
                // Toast('输入框不能为空~');
                Dialog.confirm({ message: '输入框不能为空' })
                    .then(() => {
                        // on confirm
                        return false;
                    })
                    .catch(() => {
                        // on cancel
                        return false;
                    });
                return false;
            }

            // 匹配账号和密码
            let arr=[];
             arr = sky_users.filter(item => {
                return item.username == uname && item.password == upass;
            });
            if (arr.length == 1) {
                // 登录成功
                // console.log('登录成功');
                // 保存 token 等信息
                let id = arr[0].id;
                localStorage.setItem('AUTO_TOKEN', id);
                // 跳转到首页或其他页面'
                // showConfirmDialog.alert({
                //     message: '登录成功。',
                // }).then(() => {
                //     // on close
                //     // 跳转登录页
                //     this.$router.push({ path: '/geren' });
                // });
                Dialog.confirm({ message: '登录成功。' })
                    .then(() => {
                        // on confirm
                        this.$router.push({ path: '/geren' });
                    })
                    .catch(() => {
                        // on cancel
                        this.$router.push({ path: '/geren' });
                    });
            }
            else {
                // 登录失败
                let arr2 = sky_users.filter(item => item.username == uname);
                if (arr2.length == 0) {
                    // Toast('该账号不存在');
                    Dialog.confirm({ message: '该账号不存在' })
                    .then(() => {
                        // on confirm
                        return false;
                    })
                    .catch(() => {
                        return false;
                        // on cancel
                    });
                }
                else {
                    // Toast('用户名或密码错误');
                    Dialog.confirm({ message: '用户名或密码错误' })
                    .then(() => {
                        // on confirm
                        return false;
                    })
                    .catch(() => {
                        return false;
                        // on cancel
                    });
                    
                }
            }
        },
    },
};
</script>